@import url(/styles/colores.css);

.consultar_texto {
    position: fixed;
    font-size: 2rem;
    right: 2%;
    bottom: 120px;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
    background-color: black;
    border-radius: 10px;
    animation: agrandar 3s infinite ease-in-out;
    display: none;
}

@keyframes agrandar {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.flecha_text {
    bottom: 112px;
    right: 5%;
    position: fixed;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid black;
    display: none;
}

.btn_whatsapp i,
.btn_cerrar i {
    border-radius: 50%;
    font-size: 6rem;
    /* Cambiar el tamaño de la tipografia */
    color: green;
    /* Color del texto */
    background: var(--whitecolor);
    /* Color de fondo */
    cursor: pointer;
    position: fixed;
    bottom: 1%;
    right: 1%;
    padding: .5rem;
    transition: all 300ms ease 400ms;
    z-index: 1001;
}

.btn_norte i,
.btn_sur i,
.btn_leon i {
    border-radius: 50%;
    font-size: 2rem;
    color: green;
    padding: .5rem;
    background: var(--whitecolor);
    transition: all 500ms ease 0ms;
}

.btn_norte,
.btn_sur,
.btn_leon {
    opacity: 1;
    width: 29rem;
    font-size: 1.8rem;
    align-content: center;
    color: var(--whitecolor);
    position: fixed;
    background: var(--textcolor);
    border-radius: 4rem;
    padding: .5rem .8rem;
    right: 2.5%;
    justify-content: space-between;
    cursor: pointer;
    font-family: 'poppins', sans-serif;
    transition: all 300ms ease 0ms;
    z-index: 1001;
}

.btn_norte {
    opacity: 1;
    bottom: 21%;

}

.btn_sur {
    opacity: 1;
    bottom: 16%;

}

.btn_leon {
    bottom: 11%;
}

.btn_norte:hover i,
.btn_sur:hover i,
.btn_leon:hover i {
    background: green;
    color: var(--whitecolor);
    transition: all 300ms ease 0ms;
}


.btn_whatsapp i:hover {

    /* Color de fondo al pasar el cursor */

    transition: all 300ms ease 0ms;
    transform: translateY(-8px);
}

.btn_cerrar i:hover {
    transition: all 300ms ease 0ms;
    transform: translateY(-8px);
}

/*
.shadow_black {
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.shadow_red {
    box-shadow: 0px 15px 20px rgb(211, 6, 62);
}

.shadow_blue {
    box-shadow: 0px 15px 20px rgb(44, 60, 92);
}

.shadow_orange {
    box-shadow: 0px 15px 20px rgb(238, 112, 40);
}

.shadow_yellow {
    box-shadow: 0px 15px 20px rgb(252, 215, 8);
}

.shadow_green {
    box-shadow: 0px 15px 20px rgb(0, 159, 154);
}
*/
.ocultar_texto {
    opacity: 0;
}

.ocultar_btn {
    opacity: 0;
    visibility: hidden;
    transition: all 200ms ease 10ms;

}

@media (max-width:1660px) {
    .btn_norte {
        
        bottom: 25%;
    
    }
    
    .btn_sur {
    
        bottom: 19%;
    
    }
    
    .btn_leon {
        bottom: 13%;
    }
}

@media (max-width:768px) {

    .btn_norte,
    .btn_sur,
    .btn_leon {
        width: 25rem;
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {

    .btn_whatsapp,
    .btn_cerrar {
        font-size: 5rem;
        bottom: 20px;
        right: 20px;
    }

    .btn_norte,
    .btn_sur,
    .btn_leon {
        width: 22rem;
        font-size: 1.3rem;
    }

    .btn_norte i,
    .btn_sur i,
    .btn_leon i {
        font-size: 1.8rem;
    }
}

@media (max-width:500px) {

    .btn_whatsapp i,
    .btn_cerrar i {
        font-size: 4.5rem;
        right: 20px;
    }

    .btn_norte,
    .btn_sur,
    .btn_leon {
        width: 19rem;
        font-size: 1.1rem;
    }

    .btn_norte i,
    .btn_sur i,
    .btn_leon i {
        font-size: 1.7rem;
    }

    .consultar_texto {
        font-size: 15px;
        right: 20px;
        bottom: 110px;
    }

    .btn_norte {
        bottom: 23%;
    
    }
    
    .btn_sur {
        bottom: 17%;
    
    }
    
    .btn_leon {
        bottom: 11%;
    }

    .flecha_text {
        bottom: 103px;
        right: 43px;

    }
}

@media (max-width: 320px) {
    .consultar_texto {

        font-size: 12px;
        right: 20px;
        bottom: 110px;
    }

    .flecha_text {
        bottom: 103px;
        right: 42px;
    }
}